import "../../../both/base"
require("./PersonalCard.scss")

class PersonalHeader extends React.Component {
    constructor(props){
        super(props)

    }

    render(){
        const handleLogin = this.props.handleLogin

        return <div className="p_card_cr bln">
            <div className="p_card">
                <div className="card_body">
                    <div className="card_top">
                        <div className="top_hint">
                            <a href="/personal_center"><img className="avatar" src={this.props.avatar}/></a>
                            <div className="card_record">
                                <a href="/personal_center"><div className="user_name">
                                    {this.props.username}
                                </div></a>
                                <div>
                                    <a href="/personal_center"><span className="record_item">评论 <span className="bold">0</span></span></a>
                                    <a href="/personal_center"><span className="record_item">发帖 <span className="bold">0</span></span></a>
                                </div>
                            </div>
                        </div>
                        <div className="user_nav">
                            <ul className="nav_item">
                                <a href="/personal_center"><li><i className="fa fa-book" />我的课程</li></a>
                                <a href="/personal_center"><li><i className="fa fa-clock-o" />历史记录</li></a>
                                <a href="/personal_center"><li><i className="fa fa-bookmark" />我的收藏</li></a>
                                <a href="/personal_center"><li><i className="fa fa-gear" />个人设置</li></a>
                            </ul>
                        </div>
                        <div className="user_logout">
                            <a href="#" onClick={handleLogin}>注销</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    }
}

export default PersonalHeader